<template>
  <div class="range-wrapper">
    <mint-range
      v-model="rangeValue"
      :min="0"
      :max="300"
      :height="0.2"
      :step="1"
      :btn-round="false"
      :btn-width="0.15"
      @input="handleDrag"
    >
    </mint-range>

    <div class="range-status">
      <span class="status" :class="{ general: generalStatus }">一般</span>
      <span class="status" :class="{ more: moreStatus }">较紧急</span>
      <span class="status" :class="{ very: veryStatus }">很紧急</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
// import jsBridge from "common/js/jsbridge";
import mintRange from "./MintRange.vue";

export default {
  name: "MyMintSlide",
  props: {
    element: {
      type: Object,
    },
  },
  components: {
    mintRange,
  },
  data() {
    return {
      rangeValue: 0,
    };
  },
  watch: {
    urgencyLevel(newLevel) {
      console.log(newLevel, "get-level----------");

      this.$emit("setLevel", newLevel);
    },
  },
  methods: {
    handleDrag(value) {
      this.$emit("onchange", value);
    },
  },
  computed: {
    generalStatus() {
      return this.rangeValue < 100;
    },
    moreStatus() {
      return 100 <= this.rangeValue && this.rangeValue < 200;
    },
    veryStatus() {
      return 200 <= this.rangeValue;
    },
    urgencyLevel() {
      if (this.rangeValue < 100) {
        return 0;
      } else if (100 <= this.rangeValue && this.rangeValue < 200) {
        return 1;
      } else if (200 <= this.rangeValue) {
        return 2;
      }
    },
  },
};
</script>

<style scoped>
/* @import "../../../common/css/mixin"; */

.range-wrapper {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: #ebebeb;
}
.range-wrapper .mint-range {
  margin-top: 4px;
}
.range-wrapper .range-status {
  margin-top: 4px;
}
.range-wrapper .range-status .status {
  display: inline-block;
  float: left;
  width: 33.33%;
  color: #cccccc;
}
.range-wrapper .range-status .general {
  color: #71e350;
}
.range-wrapper .range-status .more {
  color: #ff6200;
}
.range-wrapper .range-status .very {
  color: #ff0000;
}
</style>
